<template>
	<view class="go-back">
		<view git class="back-icon" @click="goBack"></view>
		<view class="title">奖励记录</view>
	</view>
	<view class="content-box" >
		<view class="empty-box">
		</view>
		<view class="record-box">
			<view class="record-item" v-for="item in rwlist.data"  :key="item.id" >
				<view class="item-text">{{item.content}}</view>
				<view class="item-bottom">
					<view class="vertify-text" v-if="item.type==23 || item.type==26" @click="openPop(item.award_id, item.title, item.desc)">查看商品核销码</view>
					<view class="vertify-text" v-if="item.type==25" @click="flq">查看福利券</view>
					<view class="item-time">{{item.show_at}}</view>
				</view>
				<view class="item-line">
				</view>
			</view>
<!-- 			<view class="record-item">
				<view class="item-text">“狗狗饮水碗”（奖励名称）的商品码核验成功，核验人“xxxx”（用户名），ID“123456”</view>
				<view class="item-bottom">
					<view class="vertify-text">查看商品核销码</view>
					<view class="item-time">2025.6.1 20:00</view>
				</view>
				<view class="item-line">
				</view>
			</view> -->
		</view>
	</view>
	<!-- 生成猫的识别二维码 -->
	<view class="qr-code-wrapper">
	  <canvas canvas-id="qrcode" :style="{width: `${qrCodeInfo.size}px`, height: `${qrCodeInfo.size}px`}" />
	</view>
	<uni-popup ref="popup" type="center" >
				<view class="pop-box" >
					<view class="close-pop" @click="closePop"></view>
					<view class="pop-content">
						<view class="title">{{raffleTitle}}</view>
						<view class="raffle-hx-box">
							<view class="hx-box">
								<image  class="hx-img" :src="qrCodeInfo.src"></image>
								<view class="hx-img-cover" v-if="is_verify"><view class="cover-text">已核销</view></view>
							</view>
							<view class="hx-title">{{popupTitle}}</view>
							<view class="hx-desc">请到活动参与商户进行商品码核销或稍后在奖励记录中查看</view>
						</view>
					</view>
				</view>
			</uni-popup>
</template>

<script>
	import uQRCode from '../../common/uqrcode.js'
	export default {
		data() {
			return {
				shared: false,
				rwlist: {
					data: [],
					page: 1,
					hasMore: false
				},
				qrCodeInfo: {
				  src: '', // 生成的二维码临时路径-验券二维码
				  size: 522,  //二维码尺寸
				  content: '', //二维码所需地址
				},
				qrCodeStateTimer: null,//状态定时器
				popupTitle:'',
				raffleTitle:'',
				is_verify:false,
				raffle_id:0,
			}
		},
		onPullDownRefresh() {
			this.getList(true);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		mounted() {
			let routes = getCurrentPages();
			let options = routes[routes.length - 1].options; 
			if (options.raffle_id) {
				 this.raffle_id = options.raffle_id;
				 this.getList(true);
			}
		},
		methods: {
			//返回
			goBack() {
				if (this.qrCodeStateTimer) {
					clearInterval(this.qrCodeStateTimer)
				}
				uni.navigateBack({
					delta: 1,
				});
			},
			openPop(record_no, title, raffleTitle) {
				this.qrCodeInit(record_no);
				this.popupTitle = title;
				this.raffleTitle = raffleTitle;
				this.is_verify = false;
				this.$refs.popup.open();
				//启动定时器-查询是否核验成功
				this.qrCodeStateTimer = setInterval((record_no) => {
					this.checkVerifyStatus(record_no);
				}, 2000, record_no);
			},
			closePop() {
				if (this.qrCodeStateTimer) {
					clearInterval(this.qrCodeStateTimer)
				}
				this.$refs.popup.close();
			},
			async getList(refresh = false) {
				if (refresh) {
					this.rwlist.page = 1
				}
				const res = await this.$request.get('/api/raffle/reward_lists', {raffle_id:this.raffle_id,page: this.rwlist.page})
				if (res.code == 200) {
					this.rwlist.hasMore = res.data.has_more_page
					const list = res.data?.lists || []
					if (refresh) {
						this.rwlist.data = list
					} else {
						this.rwlist.data = this.rwlist.data.concat(list)
					}
				}
			},
			flq() {
				uni.navigateTo({
					url:"/pages/mine/reward?status=2"
				})
			},
			// 生成二维码
			qrCodeInit(record_no) {
			 const content = `record_no=${record_no}`
			  uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: content,
					size: this.qrCodeInfo.size,
					typeNumber: 4,
					correctLevel : 1,
					margin: 6,
					success: async (res) => {
						this.qrCodeInfo.src = res
					},
			 })
			},
			async checkVerifyStatus(record_no) {
				const res = await this.$request.post('/api/raffle/verify_status',{ record_no: record_no},{ load: false })
				if (res.code == 200) {
					if (res.data.is_verify > 0) {
						this.is_verify = true;
						clearInterval(this.qrCodeStateTimer);
					}
				}
			},
		}
	}
</script>

<style>
page {
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color:#FFDA61 ;
}
</style>
<style scoped lang="scss">
	.go-back{
		position: fixed;
		width:100%;
		height: 88rpx;
		overflow: hidden;
		z-index:999;
		top:88rpx;
		.back-icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
			background-size: 100% 100%;
			float: left;
			margin-left:18rpx;
			margin-top:16rpx;
			
		}
		.title{
			width: 238rpx;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			line-height: 42rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-top:28rpx;
			margin-left:130rpx;
		}
	}
	.content-box{
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		overflow: hidden;
		.empty-box{
			position: relative;
			width: 100%;
			height: 204rpx;
		}
		.record-box{
			width: 686rpx;
			min-height: 1342rpx;
			background: #FFFCF3;
			border-radius: 32rpx;
			margin:0 auto;
			overflow: hidden;
			.record-item{
				width: 638rpx;
				height: auto;
				margin:0 auto;
				overflow: hidden;
				margin-top:40rpx;
				.item-text{
					width: 638rpx;
					height: auto;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #262626;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.item-bottom{
					position: relative;
					width: 100%;
					height: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #7B7B7B;
					text-align: right;
					font-style: normal;
					text-transform: none;
					margin-top:32rpx;
					.vertify-text{
						width: 182rpx;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FF7800;
						text-align: left;
						font-style: normal;
						text-decoration-line: underline;
						text-transform: none;
						float: left;
					}
					.item-time{
						position: absolute;
						width: 210rpx;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #7B7B7B;
						text-align: right;
						font-style: normal;
						text-transform: none;
						right: 0;
						top:0;
					}
				}
				.item-line{
					width: 590rpx;
					height: 1rpx;
					margin:0 auto;
					margin-top:34rpx;
					background: rgba(0,0,0,0.1);
				}

			}
		}
	}
	
	.pop-box{
		width: 686rpx;
		height: 1198rpx;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_pop_bg.png);
		background-size: 100% 100%;
		overflow: hidden;
		.close-pop{
			width: 32rpx;
			height: 32rpx;
			margin-top:140rpx;
			margin-left:40rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/pop-close.png);
			background-size: 100% 100%;
		}
		.pop-content{
			width: 638rpx;
			height: 976rpx;
			margin:0 auto;
			margin-top:24rpx;
			border-radius: 24rpx;
			overflow: hidden;
			.title{
				margin-top:18rpx;
				width: 100%;
				height: 42rpx;
				line-height: 42rpx;;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.raffle-hx-box{
				width: 574rpx;
				height: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin:0 auto;
				overflow: hidden;
				.hx-box{
					position: relative;
					display: block;
					width: 522rpx;
					height: 522rpx;
					margin:0 auto;
					.hx-img{
						display: block;
						width: 522rpx;
						height: 522rpx;
						margin:0 auto;
						margin-top:108rpx;
					}
					.hx-img-cover{
						position: absolute;
						display: block;
						width: 522rpx;
						height: 522rpx;
						top:0;
						left: 0;
						z-index:100;
						background: rgba(255,255,255,0.85);
						text-align: center; 
						.cover-text{
							font-weight: 500;
							font-size: 32rpx;
							color: #000000;
							line-height: 522rpx;
						}
					}
				}
				.hx-title{
					width: 522rpx;
					height: 50rpx;
					margin:0 auto;
					margin-top:72rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #FF7800;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.hx-desc{
					width: 428rpx;
					height: 72rpx;
					margin:0 auto;
					margin-top:12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #262626;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	.qr-code-wrapper {
		position: fixed;
		overflow: hidden;
		left: -2000rpx;
		opacity: 0;
		top: 400rpx;
	}

</style>
